<template>
    <!-- header -->
    <Header></Header>
    <!-- nav -->
    <Nav></Nav>


    <div class="box">

<!-- {{--        <div class="crumb"><a href="index.html">首页</a>\<a href="live-list.html">精彩直播</a>\<span class="text-red">直播详情</span></div>--}} -->

        <div class="video-detail-head">
            <h4 class="video-detail-name">{{ video.name }}</h4>
            <div class="clearfix video-detail-other">
<!-- {{--                <span class="pull-left num">观看人数：<span>187</span></span>--}} -->
                <span class="pull-left num">{{ video.speaker }} - {{ video.title }} - {{ video.unit }}</span>
            </div>

        </div>

        <div class="live-video-box" style="min-height: 600px;">
            <!-- <template v-if="video.video_src == ''">
                课程正在制作中，敬请期待...
            </template>
            <template v-else>
                <video id="video" class="video-js vjs-default-skin" webkit-playsinline=”” playsinline=”” x5-playsinline=”” x-webkit-airplay=”allow”  controls>
                    您的浏览器不支持 video 标签。
                    <template v-if="video.video_type == 'mp4'">
                        <source :src="video.video_src">
                    </template>
                    <template v-else>
                        <source :src="video.video_src" type="application/x-mpegURL">
                    </template>
                </video>
            </template> -->

            <!-- <video-player ref="videoPlayer" :options="videoOptions"></video-player> -->
            <video-player ref="videoPlayer" :options="videoOptions"></video-player>
            <!-- <VideoPlayer></VideoPlayer> -->

        </div>

        <div class="video-detail-head">
            <div class="news-detail-text matop20">
                <p>{{ video.content }}</p>
            </div>

        </div>

    </div>

    <!-- <div id="videoFinishModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <h3 class="modal-title">温馨提示</h3>
                <div class="modal-text">
                    <p>您已完成课程学习</p>
                </div>
                <div class="modal-btn">
                    <a href="#" class="btn btn-default btn-hollow btn-inline" data-dismiss="modal">继续学习</a>
                    @if($video->question_count == 0)
                        @if($nextVideoHid)
                            <a href="javascript: window.location.replace('/web/talent/course_detail/{{ $nextVideoHid }}');" class="btn btn-primary btn-inline">下一课程</a>
                        @else
                            <a href="javascript: window.history.back(-1);" class="btn btn-primary btn-inline">返回列表</a>
                        @endif
                    @else
                        <a href="javascript: window.location.replace('/web/talent/answer/{{ $video->hash_id }}');" class="btn btn-primary btn-inline">去答题</a>
                    @endif
                </div>
            </div>
        </div>
    </div> -->


    <!-- foot -->
    <Footer></Footer>
</template>
<script>
import Header from "../../../components/web/Header";
import Nav from "../../../components/web/Nav";
import Footer from "../../../components/web/Footer";
import VideoPlayer from "../../../components/web/VideoPlayer";
// import videojs from 'video.js' 
// import 'videojs-contrib-hls'
// import "@videojs/http-streaming"

export default {
    name: "CourseDetail",
    components:{
        Header,
        Nav,
        Footer,
        VideoPlayer
    },
    setup(){
    // let store = useStore();
    // let cart = computed(() => {
    //   return store.state.cart
    // })

    // return {
    //   cart
    // }
    },
    data() {
        return {
            isStandard: 0,
            isViewVideo: 0,
            nextVideoHid: '',
            questionCount: 0,
            video: {},
            whiteList: 0,
            videoOptions:{
                autoplay: false,
                muted: false,
                loop: false,
                preload: 'auto',
                controls: true,
                language: 'zh-CN',
                poster: 'http://static.tcmcme.cn/images/谷晓红-“道术结合”的名老中医传承创新研究实践（上）.jpg',
                // aspectRatio: '16:9',
                fluid: true,
                sources: [
                    {
                        src: "http://static2.tcmcme.cn/kangguan_study_1.mp4",
                        type: "video/mp4"
                    }
                ],
                notSupportedMessage: '此视频暂无法播放，请稍后再试',
                controlBar: {
                    remainingTimeDisplay: false, //
                    currentTimeDisplay: true, // 当前时间
                    timeDivider: true, // 时间分割线
                    durationDisplay: true, // 总时间
                    progressControl: true, // 进度条

                    customControlSpacer: true, //
                    fullscreenToggle: true, // 全屏按钮
                    volumePanel: false
                }
            },// videoOptions结尾
        }
    },
    methods: {
        async searchProjects () {
            
            let params = this.$route.params;
            let url = '/scanapi/api/v1/web/talent/course_detail/' + params.hash_id;
            
            let others = {
                headers: {
                    accessToken: 'A4D3F61A-F152-482E-9DC9-B7D14F682D7D',
                    projectId2: "A4D3F61A-F152-482E-9DC9-B7D14F682D7D",
                },
            };
            // const items = await this.$http.post('/api/banner')
            
            const res = await this.$http.post(url)
            console.log(res);
            
            this.isStandard = res.data.isStandard;
            this.isViewVideo = res.data.isViewVideo;
            this.nextVideoHid = res.data.nextVideoHid;
            this.questionCount = res.data.questionCount;
            this.video = res.data.video;
            this.whiteList = res.data.whiteList;
        }
        

    },
    async created(){
        try{
            this.searchProjects ();
        }catch(err){
            console.log(err)
        }
    }
}
</script>
<style>
    
</style>